<template>
  <span class="bubble">
    {{ num }}
  </span>
</template>

<script>
export default {
  'name': 'bubble',
  'props': {
    'num': {
      'type': Number
    }
  }
};
</script>

<style lang="stylus" scoped>
.bubble
  display inline-block
  padding 0 5px
  height 16px
  line-height 16px
  text-align center
  border-radius 16px
  font-family Helvetica
  font-weight 700
  font-size 10px
  color #fff
  background -webkit-gradient(linear, left top, right top, from(#fc9153), to(#f01414))
  background -webkit-linear-gradient(left, #fc9153, #f01414)
  background linear-gradient(90deg, #fc9153, #f01414)
</style>
